 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园宝贝集市-发布商品</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../static/css/style.css">
    <link rel="stylesheet" href="../static/css/suopping.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    {%include 'nav.html' %} 
    <div class="container">
        <h2>商品发布管理</h2>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">发布商品</button>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>商品ID</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>商品类别</th>
                    <th>发布人</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="suoppingList">
                <!-- 商品数据将会在这里动态生成 -->
            </tbody>
        </table>
    </div>
    <!-- //发布商品的弹窗 -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">发布商品</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>商品名称</label>
                        <input type="text" class="form-control" id="addName" placeholder="请输入商品名称">
                    </div>
                    <div class="form-group">
                        <label>商品成色</label>
                        <select id="addLevel" name="addLevel" class="form-control"  required>
                            <option value="全新">全新</option>
                            <option value="几乎全新">几乎全新</option>
                            <option value="轻微使用">轻微使用</option>
                            <option value="中等磨损">中等磨损</option>
                            <option value="磨损较多">磨损较多</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>商品详细信息</label>
                        <input type="text" class="form-control" id="addRemark" placeholder="请输入商品详细信息">
                    </div>
                    <div class="form-group">
                        <label>商品价格</label>
                        <input type="number" class="form-control" id="addPrice" placeholder="请输入商品价格">
                    </div>
                    <div class="form-group">
                        <label>商品类别</label>
                        <select id="addSort" class="form-control" required>
                            <option value="图书">图书</option>
                            <option value="电子产品">电子产品</option>
                            <option value="服装">服装</option>
                            <option value="运动产品">运动产品</option>
                            <option value="学习用品">学习用品</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>商品数量</label>
                        <input type="number" class="form-control" id="addCount" placeholder="请输入商品数量">
                    </div>
                    <div class="form-group">
                        <label>商品图片</label>
                        <input type="file" id="addImage" name="addImage"  class="form-control" accept="image/*" required>
                    </div>
                    <div class="form-group">
                        <label>交易方式：</label>
                        <select id="addTransaction" class="form-control" name="addTransaction"  required>
                            <option value="货到付款">货到付款</option>
                            <option value="在线支付">在线支付</option>
                            <option value="银行转账">银行转账</option>
                        </select>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="addSuopping">发布</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                </div>
            </div>
        </div>
    </div> 
    <!-- 修改学生的弹窗 -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改商品</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>商品名称</label>
                        <input type="text" class="form-control" id="editName" placeholder="请输入商品名称">
                    </div>
                    <div class="form-group">
                        <label>商品成色</label>
                        <select id="editLevel" name="editLevel" class="form-control"  required>
                            <option value="全新">全新</option>
                            <option value="几乎全新">几乎全新</option>
                            <option value="轻微使用">轻微使用</option>
                            <option value="中等磨损">中等磨损</option>
                            <option value="磨损较多">磨损较多</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>商品详细信息</label>
                        <input type="text" class="form-control" id="editRemark" placeholder="请输入商品详细信息">
                    </div>
                    <div class="form-group">
                        <label>商品价格</label>
                        <input type="number" class="form-control" id="editPrice" placeholder="请输入商品价格">
                    </div>
                    <div class="form-group">
                        <label>商品类别</label>
                        <select id="editSort" class="form-control" required>
                            <option value="图书">图书</option>
                            <option value="电子产品">电子产品</option>
                            <option value="服装">服装</option>
                            <option value="运动产品">运动产品</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>商品数量</label>
                        <input type="number" class="form-control" id="editCount" placeholder="请输入商品数量">
                    </div>
                    <div class="form-group">
                        <label>商品图片</label>
                        <input type="file" id="editImage" name="editImage"  class="form-control" accept="image/*" required>
                    </div>
                    <div class="form-group">
                        <label>交易方式：</label>
                        <select id="editTransaction" class="form-control" name="editTransaction"  required>
                            <option value="货到付款">货到付款</option>
                            <option value="在线支付">在线支付</option>
                            <option value="银行转账">银行转账</option>
                        </select>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveSuopping">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">返回</button>
                </div>
            </div>
        </div>
    </div> 





</body>

<script>
   

    $.getJSON('/suoppings', function (data) {
        
        $.each(data, function (key, value) {
            var tr = $("<tr></tr>");
            $("<td></td>").text(value.id).appendTo(tr);
            $("<td></td>").text(value.name).appendTo(tr);
            $("<td></td>").text(value.price).appendTo(tr);
            $("<td></td>").text(value.count).appendTo(tr);
            $("<td></td>").text(value.sort).appendTo(tr);
            $("<td></td>").text(value.uid).appendTo(tr);
            $("<td></td>").text(value.modify).appendTo(tr);
            var td = $("<td></td>").appendTo(tr);
            $("<button></button>").text("修改").addClass("btn btn-primary btn-sm").click(function(){
                editSuopping(value.id);  // 传递ID到编辑函数中
                var ID = value.id
            }).appendTo(td);
            $("<button></button>").text("删除").addClass("btn btn-danger btn-sm").click(function(){
                deleteSuopping(value.id);  // 传递ID到删除函数中
                
            }).appendTo(td);
            $("#suoppingList").append(tr); // 将每行信息追加到表格中
        });
    });
    // <th><a href="#" class='shanchu' data-id='${ele.Student_id}'>删除</a><a href="#" class='xiugai' data-id='${ele.Student_id}'>修改</a></th>


    // 发布商品信息
    $("#addSuopping").click(function () {
        var uid = "{{ session.get('username') }}";
        var suopping = {
            id: $("#addId").val(),
            name: $("#addName").val(),
            level: $("#addLevel").val(),
            remark: $("#addRemark").val(),
            price: $("#addPrice").val(),
            sort: $("#addSort").val(),
            count: $("#addCount").val(),
            image: $("#addImage").val(),
            transaction: $("#addTransaction").val(),
            uid: uid 
            // uid:/* 在登录时获取的 uid，这里需要根据实际情况填写 */

        };
        $.ajax({
            url: '/suoppings',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(suopping),
            success: function () {
                location.reload();
            },
            error: function (xhr, status, error) {
                alert("发布商品信息失败：" + error);
            }
        });
            
    });
     // 修改发布商品信息
    function editSuopping(event) {
    //     var id = $(event.target).attr('id');
        var id = event.id;
        $("#editId").val(event.data.id);
        $("#editName").val(event.data.name);
        $("#editLevel").val(event.data.level);
        $("#editRemark").val(event.data.remark);
        $("#editPrice").val(event.data.price);
        $("#editSort").val(event.data.sort);
        $("#editCount").val(event.data.count);
        $("#editImage").val(event.data.image);
        $("#editTransaction").val(event.data.transaction);
        $("#editModal").modal('show');
    };
    // function editSuopping(id) {
    //     $("#editId").val(id);  // 更新以正确设置编辑表单字段
    //     // 类似地获取其他字段
    //     $.getJSON('/suoppings/' + id, function (data) {
    //         $("#editName").val(data.name);
    //         $("#editLevel").val(data.level);
    //         $("#editRemark").val(data.remark);
    //         $("#editPrice").val(data.price);
    //         $("#editSort").val(data.sort);
    //         $("#editCount").val(data.count);
    //         $("#editImage").val(data.image);
    //         $("#editTransaction").val(data.transaction);
    //     });
    //     $("#editModal").modal('show');
    // }

    $("#saveSuopping").click(function () {
        var suopping = {
            id: $("#editId").val(),
            name: $("#editName").val(),
            level: $("#editLevel").val(),
            remark: $("#editRemark").val(),
            price: $("#editPrice").val(),
            sort: $("#editSort").val(),
            count: $("#editCount").val(),
            image: $("#editImage").val(),
            transaction: $("#editTransaction").val()
        };
        $.ajax({
            url: '/suoppings/' + suopping.id,
            type: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify(suopping),
            success: function () {
                location.reload();
            },
            error: function (xhr, status, error) {
                alert("修改商品信息失败：" + error);
            }
        });
    });
    // 删除商品信息
    function deleteSuopping(event) {
        if (confirm("确定要删除id为 " + event.data.id + " 的商品信息吗？")) {
            $.ajax({
                url: '/suoppings/' + event.data.id,
                type: 'DELETE',
                success: function () {
                    location.reload();
                },
                error: function (xhr, status, error) {
                    alert("删除发布商品信息失败：" + error);
                }
            });
        }
    }
 
</script>
</html>
